<template>
  <el-main class="paddingLR0 marginL20">
    <el-row class="obpm-fromContent-title obpm-enterpriseDomain-logo normalHeight">
      <el-col :span="12"  class="normalLineH">{{$t('online_user')}}</el-col>
      <el-col :span="12" style="text-align:right"  class="normalLineH">
          <el-button type="primary" @click="onRefreshBtnClick" size="small">{{$t('refresh')}}</el-button>
          <el-button @click="onExit" size="small" type="primary" plain>{{$t('exit')}}</el-button>
      </el-col>
    </el-row>
    <p class="smallLineH paddingT10">{{$t('online_num')}}{{num}}</p>
    <el-form size="mini" class="marginTop10">
      <el-row>
        <el-col>
          <el-form-item :label="$t('domain')" class="padding0Label">
            <el-select v-model="domainsName" :placeholder="$t('placeholder_select')" @change="changeDomain">
              <el-option
                v-for="item in domains.datas"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    
    <el-table 
      :data="onlineUser.datas"
      header-cell-class-name="tableHeaderbg"
      :height="tableListConHeight"
      size="small">
      <el-table-column prop="name" :label="$t('username')"></el-table-column>
      <el-table-column prop="loginNo" :label="$t('loginno')"></el-table-column>
      <el-table-column prop="email" :label="$t('email')"></el-table-column>
      <el-table-column prop="mobile" :label="$t('tel')"></el-table-column>
      <el-table-column prop="loginTime" :label="$t('login_time')">
        <template slot-scope="scope">
          {{ resolvingDate(scope.row.loginTime)  }}
        </template>
      </el-table-column>
      <el-table-column prop="loginTime" :label="$t('operating')">
        <template slot-scope="scope">
          <el-button size="small" @click="offLine(scope.$index,scope.row)">{{$t('off_line')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="searchTableData"
      :current-page.sync="searchdata.currpage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="searchdata.pagelines"
      layout="prev, pager, next, total, sizes"
      background
      :total="onlineUser.rowCount?onlineUser.rowCount:0"
      class="align-right"
    ></el-pagination>
  </el-main>
</template>

<script>

import admin_header from "@/components/admin_header.vue";

export default {
  props:[
    "currentService"
  ],
  data(){
    return {
      onlineUser:{datas:[]},
      searchdata:{
        currpage:1,
        pagelines:100000,
        data:{
          name:"",
          username:''
        }
      },
      searchdata2:{
        domainid:"",
        currpage:1,
        pagelines:100000,
      },
      num:0,
      domainsName:"",
      domains:{},
      tableListConHeight:0,
      currentService:{}
    }
  },
  computed:{

  },
  component:{
    admin_header
  },
  created() {
    let queryData = this.$route.query
    this.currentService = JSON.parse(queryData.currentService)
    let currentService = this.currentService
    this.tableListConHeight=  `${document.documentElement.clientHeight}`- 27 -43 - 58 -22;
    this.searchTableData();
    this.$api.monitorGetDomains(this.searchdata, currentService,{
      onSucess: response => {
        this.domains = response.data.data;
        this.domains.unshift({"id":"","name":"ALL"});
        this.domainsName = this.domains[0].id;
      }
    });
  },
  methods: {
    offLine(index,row){
      let currentService = this.currentService
      this.$api.deleteOnlineUser(row.id, currentService,{
        onSucess: resp => {
          if(resp.data.errcode==0){
            this.$message({
              showClose: true,
              message: this.$t('msg_offline'),
              type: "success"
            });
            this.searchTableData()
          }else{
            this.$message({
              showClose: true,
              message: resp.data.errmsg,
              type: "error"
            });
          }
        }
      });
    },
    changeDomain(val){
      this.searchdata2.domainid=val;
      this.searchTableData();
    },
    handleSizeChange(size){
      this.searchdata.pagelines=size;
      this.searchTableData();
    },

    searchTableData(){
      let currentService = this.currentService
      this.$api.getOnlineUser(this.searchdata2.currpage,this.searchdata2.pagelines,this.searchdata2.domainid,currentService,{
        onSucess:resp =>{
          if(resp.data.errcode==0){
            this.onlineUser=resp.data.data;
            this.num=this.onlineUser.datas.length;
          }else{
            this.$message({
              showClose: true,
              message: resp.data.errmsg,
              type: "error"
            });
          }
        },
        onError:function(){

        }
      })
    },
    onRefreshBtnClick(){
      this.searchTableData();
    },
    onExit(){
      window.close()
      // this.$emit("exit")
    },
    resolvingDate(date){
      let d = new Date(date);

      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
      let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
      let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
      let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
      let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();

      let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;

      return times
    },
  },
};
</script>
<style lang="scss" scoped>

</style>